<template>
    <div class="trademark">
         <div class="trademark_top">
             <div class="trade_back">
                 <img src="/static/picture/trade_back.png">
             </div>
             <div class="trade_title">
                 品牌店铺
             </div>   
             <div class="trade_rule">规则</div>
             <div class="trade_img">
                 <img src="/static/picture/trade_top.png">
             </div>
             <div class="trade_tit">
                <span class="trade_line"></span>
                <div class="trade_name">天猫官方</div>   
                <span class="trade_line"></span> 
             </div> 
             <div class="trade_menu">
                 <div class="menu">
                     <img src="/static/picture/tbao.png">
                     <p>天猫女装</p>
                 </div>
                 <div class="menu">
                     <img src="/static/picture/tbao.png">
                     <p>天猫女装</p>
                 </div>
                 <div class="menu">
                     <img src="/static/picture/tbao.png">
                     <p>天猫女装</p>
                 </div>
                 <div class="menu">
                     <img src="/static/picture/tbao.png">
                     <p>天猫女装</p>
                 </div>
                 <div class="menu">
                     <img src="/static/picture/tbao.png">
                     <p>天猫女装</p>
                 </div>
                 <div class="menu">
                     <img src="/static/picture/tbao.png">
                     <p>天猫女装</p>
                 </div>
             </div>
             <div class="trade_tit">
                <span class="trade_line"></span>
                <div class="trade_name">知名品牌</div>   
                <span class="trade_line"></span> 
             </div> 
             <div class="trade_menu">
                 <div class="menu">
                     <img src="/static/picture/tbao.png">
                     <p>天猫国际</p>
                 </div>
                 <div class="menu">
                     <img src="/static/picture/tbao.png">
                     <p>天猫国际</p>
                 </div>
                 <div class="menu">
                     <img src="/static/picture/tbao.png">
                     <p>天猫国际</p>
                 </div>
                 <div class="menu">
                     <img src="/static/picture/tbao.png">
                     <p>天猫国际</p>
                 </div>
                 <div class="menu">
                     <img src="/static/picture/tbao.png">
                     <p>天猫国际</p>
                 </div>
                 <div class="menu">
                     <img src="/static/picture/tbao.png">
                     <p>天猫女装</p>
                 </div>
             </div> 
             <div class="trade_lines"></div> 
             <div class="trade_tit">
                <span class="trade_line"></span>
                <div class="trade_name">超级大牌</div>   
                <span class="trade_line"></span> 
             </div>   
             <div class="trade_super">
                <div class="sort_block" id="sort_block">
                    <ul class="items custom-scrollbar">
                        <li class="item on">美妆</li>
                        <li class="item">箱包</li>
                        <li class="item">百货</li>
                        <li class="item">母婴</li>
                        <li class="item">手机</li>
                        <li class="item">文体</li>
                        <li class="item">车品</li>
                        <li class="item">鞋类</li>
                        <li class="item">其他</li>
                    </ul>
                </div>    
                <div class="trade_menu">
                    <div class="menu">
                        <img src="/static/picture/tbao.png">
                        <p>天猫国际</p>
                    </div>
                    <div class="menu">
                        <img src="/static/picture/tbao.png">
                        <p>天猫国际</p>
                    </div>
                    <div class="menu">
                        <img src="/static/picture/tbao.png">
                        <p>天猫国际</p>
                    </div>
                    <div class="menu">
                        <img src="/static/picture/tbao.png">
                        <p>天猫国际</p>
                    </div>
                    <div class="menu">
                        <img src="/static/picture/tbao.png">
                        <p>天猫国际</p>
                    </div>
                    <div class="menu">
                        <img src="/static/picture/tbao.png">
                        <p>天猫女装</p>
                    </div>
                </div>
             </div>         
         </div>
          <temp_footer></temp_footer> 
    </div>
</template>

<script>
import  temp_footer from './base.vue'
export default {
  name: 'trademark',
  data() {
    return {

    }
  }, 
 components: {
     "temp_footer":temp_footer,
  }, 
}         
</script>

<style scoped>
.trademark_top{width:100%;height:350px;padding-top:60px;background:url(/static/images/trade.png) no-repeat center center;background-size:100% 100%;  display: flex;flex-wrap: wrap;justify-content:space-between;justify-items: center;text-align: justify;margin-bottom:48px;}
.trade_back{width:40px;height:40px;margin-left:25px;}
.trade_back img{width:100%;}
.trade_title{font-size:34px;font-weight:600;line-height:48px;}
.trade_rule{margin-right:25px;font-size:28px;line-height:48px;}
.trade_img{width:700px;height:280px;margin:0 auto;margin-top:70px; }
.trade_img img{width:100%;}
.trade_tit{width:296px;line-height:44px;font-size:32px;color:#333334;font-weight:bold;margin:0 auto;margin-top:58px;display: flex;flex-wrap: wrap;justify-content:space-between;justify-items: center;text-align: justify;}
.trade_tit .trade_line{width:64px;height:2px;border-top:2px solid #E4E4E4;position: relative;top:22px;}
.trade_menu{width:698px;margin:0 auto;display: flex;flex-direction: row;flex-wrap: wrap;margin-top:20px;}
.trade_menu .menu{margin-right:78px;margin-top:32px;}
.trade_menu .menu:nth-child(4n){margin-right:0;}
.trade_menu .menu p{font-size:28px;color:#333334;font-weight:500;line-height:20px;}
.trade_menu img{width:104px;height:104px;}
.trade_lines{width:100%;height:20px;background:#F8F8F8;margin-top:44px;}
.trade_super{width:100%;padding-bottom:140px;}
.trade_super .trade_menu{width:698px;margin:0 auto;}
.sort_block {
  position: relative;
  background-color: #fff;
  margin-top:40px;
  height:76px;
  padding-left:18px;
  overflow-x: scroll;
  border-bottom:2px solid #F2F2F2;
}
.trademark .items {
  display: flex;
  line-height:60px;
}
.trademark .items .item{
  white-space: nowrap;
  line-height:71px;
  font-size:28px;
  margin-right:64px;
  padding:0 4px;
  color: #9B9B9B;
  letter-spacing: 0;
  text-align: center;
}
.sort_block .items .item:last-child{margin-right:24px;}
.trademark .items .on{font-weight:600;color:#333334;border-bottom:6px solid #FFE514;border-radius:4px 0px 4px 0px;}
</style>
